import React, {useState, useEffect, useLayoutEffect} from 'react'

import useChapterContext, {ChapterContext} from '@/hooks/useChapterContext'
import NodeTree from './Base/NodeTree'
import NodeEditor from './Base/NodeEditor'
import SimulatorCard from '@/components/SimulatorCard'
import PropertyCard from './Base/PropertyCard'

export default function Editor () {
  const ChapterContextState = useChapterContext()
  const [chapter, setChapter] = ChapterContextState.chapter
  const [_, setRefresh] = ChapterContextState.refresh

  return <ChapterContext.Provider value={ChapterContextState}>
    <NodeTree />
    <div style={{
      height: '100%',
      width: '30%',
      background: '#ccc',
      position: 'fixed',
      right: 0,
      padding: 10,
      boxSizing: 'border-box'
    }}>
      <SimulatorCard editor/>
      <PropertyCard />
    </div>

    <NodeEditor />
  </ChapterContext.Provider>
}
